<!--
 * @Descripttion: 
 * @version: 
 * @Author: jiating
 * @Date: 2021-02-22 17:03:48
 * @LastEditors: jiating
 * @LastEditTime: 2021-02-24 14:59:55
-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>K5G-C</title>
    <link rel="stylesheet" href="./css/common.css"/>
    <link rel="stylesheet" href="./css/index.css"/>
    <link rel="stylesheet" href="./css/mobile.css"/>
    <link rel="stylesheet" href="./css/webSearch.css">
</head>

<body>
<div class="main">
    <div class="tit-heade">
        <div class="itemOne">
            <img src="./image/left.png" >
        </div>
        <div class="itemTwo">
            <div class="item-chil">
                <img src="./image/logoutOne.png">
            </div>
            <div class="item-chil">
                <a href="/action/logout">ログアウト</a>
            </div>
            
        </div>
    </div>  
    <div class="nav2">
        <div class="nav-item">
            <div id='x1' class="item" onclick="toPage('./home.html')">ホーム</div>
        </div>
        <div class="nav-item">
            <div id='x2' class="item no-act" onclick="toPage('./mobileData.html')">モバイルネットワーク</div>
            <div class="">
                <div>
                    <div class="">
                        <div class="item1" id="wifi1" onclick="toPage('./mobileData.html')">モバイルデータ設定</div>
                        <div class="item1" id="wifi_list" onclick="toPage('./priorityNetwork.html')">優先ネットワーク設定</div>
                        <div class="item1 choose" id="wifi_list" onclick="toPage('./webSearch.html')">ネットワーク検索設定</div>
                        <div class="item1" id="wifi_list" onclick="toPage('./apn.html')">アクセスポイント設定</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nav-item">
            <div id='x3' class="item no-act" onclick="toPage('./wifi.html')">Wi-Fi設定</div>
        </div>
        <div class="nav-item">
            <div id='x4' class="item no-act" onclick="toPage('./dhcp.html')">Ethernet設定</div>
        </div>
        <div class="nav-item">
            <div id='x5' class="item no-act" onclick="toPage('./port.html')">LAN設定</div>
            
        </div>
        <div class="nav-itm">
            <div id='x6' class="item no-act" onclick="toPage('./password.html')">端末設定</div>
        </div>
    </div>

    <div id="mobile" class="content">
        <div class="title">ネットワーク検索</div>

        <div style="margin-left: 100px;margin-top: 10px;">
            <p>モバイルネットワークの選択方法を設定できます。</p>
            <p>自動選択をOFFにすると周辺ネットワークのサーチとサーチ結果を表示し、選択したネットワークに接続できます。</p>
        </div>
        
        <div id="sim0">
            <div class="form-box" style="padding: 30px">
                <div style="color: #333333; font:bold; font-size: 24px; border-bottom: 1px solid #000">SIM1
                </div>
            </div>

            <form action="" class="default-form">
                <table class="input-table">
                    <tbody>
                        <tr>
                            <th><label class="default-label" for="">ネットワーク自動選択</label></th>
                            <td>
                                <input type="checkbox" onclick="autoChoose(0)" name="auto-choose0" id="auto-choose0"
                                    class="chooseBtn"/>
                                <label for="auto-choose0" class="choose-label"/>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </div>
        <div id="sim1">
            <div class="form-box" style="padding: 30px">
                <div style="color: #333333; font:bold; font-size: 24px; border-bottom: 1px solid #000">SIM2
                </div>
            </div>

            <form action="" class="default-form">
                <table class="input-table">
                    <tbody>
                        <tr>
                            <th><label class="default-label" for="">ネットワーク自動選択</label></th>
                            <td>
                                <input type="checkbox" onclick="autoChoose(1)" name="auto-choose1" id="auto-choose1"
                                    class="chooseBtn"/>
                                <label for="auto-choose1" class="choose-label"/>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </div>


    </div>

    <div id="modal">
        <div class="win">
            <div class="tab-data">
                <table id="tab">
                    <thead>
                    <tr >
                        <th style="width: 28%;">ネットワーク</th>
                        <th style="width: 9%;">動作</th>
                    </tr>
                    </thead>
                    <tbody id="TbData1"></tbody>
                    <tbody id="TbData" ></tbody>
                </table>
            </div>
        　　<span class="close" style="top: 3px;" onclick="closeframe()">×</span>
        </div>
    </div>

    <div id="rebootBtn">
        <div class="win">
            <div class="tab-data">
                ネットワークを検索中
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="./js/utils.js"></script>
<script>
    
    window.onload = function () {
        getData()
        getSimNum()
    }

    

    function getSimNum() {
        var num = sessionStorage.getItem('activeSimNumber')
        if (num == 0) {
            var btn = document.getElementById('x2')
            btn.onclick = function() {}
            btn.style.backgroundColor = '#eee'
        }
        var params = {}
        Ajax.post(baseUrl + '/action/getActiveSimCardNumber', JSON.stringify(params), function(res) {
            var response = JSON.parse(res)
            if (response.status == 'success') {
                sessionStorage.setItem('activeSimNumber', response.data.activeSimNumber)
            }
        })
    }

    function getData() {
        var params = {}
        Ajax.post(baseUrl + '/action/getNetworkScanMode', JSON.stringify(params), function(res) {
            var response = JSON.parse(res)
            if (response.status == 'success') {
                var data = response.data
                if(data.slot0 == data.slot1){
                    document.getElementById('auto-choose0').checked = true;
                }else{
                    if(data.slot0 != 'null'){
                        if (data.slot0 == 1) {
                            document.getElementById('auto-choose0').checked = true;
                        }
                        if (data.slot0 == 2) {
                            document.getElementById('auto-choose0').checked = false;
                            autoChoose()
                        }
                    }else{
                        document.getElementById('sim0').style.display = "none"
                    }
                }
                
                if(data.slot1 != "null"){
                    if (data.slot1 == 1) {
                        document.getElementById('auto-choose1').checked = true;
                    }
                    if (data.slot1 == 2) {
                        document.getElementById('auto-choose1').checked = false;
                        autoChoose()
                    }
                }else{
                    document.getElementById('sim1').style.display = "none"
                }
                
            } else {
                Message.showmsg(response.message)
            }
        })
    }

    //close
    function closeframe(){
        modal.style.display="none";
        var table = document.getElementById('TbData');
        var childs = table.childNodes;
        if(childs.length > 0){
            for(let i=childs.length-1;i>=0;i--){
                table.removeChild(childs[i]);
            }
            console.log(table.childNodes,121212121)
        }
    }

    function autoChoose(data) {
        var modal = document.getElementById("modal");
        var targetStatus0 = document.getElementById("auto-choose0").checked == true ? "1" : "0";
        var targetStatus1 = document.getElementById("auto-choose1").checked == true ? "1" : "0";
        var modalBtn = document.getElementById("rebootBtn");

        if(data == 0){
            if(targetStatus0 == 1){
                
            }else{
                document.getElementById('auto-choose1').checked = true;
            }

            if(targetStatus0 == 0){
                modalBtn.style.display = "block";
                var params = {
                    isAuto:'0',
                    slot:data.toString()
                }
                Ajax.post(baseUrl + '/action/autoSelectNetwork', JSON.stringify(params),function (res) {
                    var response = JSON.parse(res)
                    if (response.status == 'success') {
                        modal.style.display = "block";
                        modalBtn.style.display = "none";
                        var data = response.data.selectableNetwork

                        if(response.data.current_network){
                            var current_network = response.data.current_network
                            var row = document.createElement('tr');
                            var oTd1=document.createElement('td');

                            oTd1.innerHTML = `<td style='border: 1px solid #d0d0d0;color: #404060;'>${current_network.alpha_long}(接続済み)</td>`

                            row.appendChild(oTd1);

                            var table = document.getElementById('TbData1');
                            table.appendChild(row);
                        }

                        

                        for (var i = 0; i < data.length ; i++) {
                            var item = data[i]
                            var ietm2 = JSON.stringify(data[i]).replace(/\"/g,"'")
                            var itemOne = item.alpha_long
                            var itemTwo = item.rat_type
                            var row = document.createElement('tr');
                            var oTd1=document.createElement('td');
                            var oTd3=document.createElement('td');
                            oTd1.innerHTML = `<td style='border: 1px solid #d0d0d0;color: #404060;'>${item.isForBidden?item.alpha_long+'(forbidden)':item.alpha_long}</td>`
                            oTd3.innerHTML = `<td style='border: 1px solid #d0d0d0;color: #404060;'><button id='delete' style ='color:blue;' onclick="addNetwork(${ietm2})">接続</button></td>`
                            row.appendChild(oTd1);
                            row.appendChild(oTd3);

                            var table = document.getElementById('TbData');
                            table.appendChild(row);
                        }
                        Message.showmsg(response.message)
                    } else {
                        Message.showmsg(response.message)
                    }
                })
            }
            if(targetStatus0 == 1){
                var params = {
                    isAuto:'1',
                    slot:data.toString()
                }
                Ajax.post(baseUrl + '/action/autoSelectNetwork', JSON.stringify(params),function (res) {
                    var response = JSON.parse(res)
                    if (response.status == 'success') {
                        Message.showmsg(response.message)
                    } else {
                        Message.showmsg(response.message)
                    }
                })
            }
        }
        if(data == 1){
            if(targetStatus1 == 1){
                
            }else{
                document.getElementById('auto-choose0').checked = true;
            }

            if(targetStatus1 == 0){
                modalBtn.style.display = "block";
                var params = {
                    isAuto:'0',
                    slot:data.toString()
                }
                Ajax.post(baseUrl + '/action/autoSelectNetwork', JSON.stringify(params),function (res) {
                    var response = JSON.parse(res)
                    if (response.status == 'success') {
                        modal.style.display = "block";
                        modalBtn.style.display = "none";
                        var data = response.data.selectableNetwork

                        if(response.data.current_network){
                            var current_network = response.data.current_network
                            var row = document.createElement('tr');
                            var oTd1=document.createElement('td');

                            oTd1.innerHTML = `<td style='border: 1px solid #d0d0d0;color: #404060;'>${current_network.alpha_long}(接続済み)</td>`

                            row.appendChild(oTd1);

                            var table = document.getElementById('TbData1');
                            table.appendChild(row);
                        }

                        for (var i = 0; i < data.length ; i++) {
                            var item = data[i]
                            var ietm2 = JSON.stringify(data[i]).replace(/\"/g,"'")
                            var itemOne = item.alpha_long
                            var itemTwo = item.rat_type
                            var row = document.createElement('tr');
                            var oTd1=document.createElement('td');
                            var oTd3=document.createElement('td');
                            oTd1.innerHTML = `<td style='border: 1px solid #d0d0d0;color: #404060;'>${item.isForBidden?item.alpha_long+'(forbidden)':item.alpha_long}</td>`
                            oTd3.innerHTML = `<td style='border: 1px solid #d0d0d0;color: #404060;'><button id='delete' style ='color:blue;' onclick="addNetwork(${ietm2})">接続</button></td>`
                            row.appendChild(oTd1);
                            row.appendChild(oTd3);

                            var table = document.getElementById('TbData');
                            table.appendChild(row);
                        }
                        Message.showmsg(response.message)
                    } else {
                        Message.showmsg(response.message)
                    }
                })
            }
            if(targetStatus1 == 1){
                var params = {
                    isAuto:'1',
                    slot:data.toString()
                }
                Ajax.post(baseUrl + '/action/autoSelectNetwork', JSON.stringify(params),function (res) {
                    var response = JSON.parse(res)
                    if (response.status == 'success') {
                        Message.showmsg(response.message)
                    } else {
                        Message.showmsg(response.message)
                    }
                })
            }
        }

        
    }


    function addNetwork(data){
        
        console.log(data,1212121)
        var modal = document.getElementById("modal");
        modal.style.display = 'none'
        var params = {
            operator_numeric:data.operator_numeric,
            rat_type:data.rat_type
        }
        Ajax.post(baseUrl + '/action/selectNetwork', JSON.stringify(params),function (res) {
            var response = JSON.parse(res)
            if (response.status == 'success') {
                
                Message.showmsg(response.message)
            } else {
                Message.showmsg(response.message)
            }
        })
    }

    


</script>
</body>

</html>
